<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
		        width: 100%;
		        border: 1px solid #ccc;
		        border-collapse: collapse;
		        border-spacing: 0px;
		    }
		
		    table td {
		        border: 1px solid #ccc;
		        height: 30px;
		    }
			button{
				margin-left: 12px;
				}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>的使用创建dom节点动态生成表格</h1>
			<label for="">学号：</label>
			<input type="text" id="row">
			<label for="">姓名：</label>
			<input type="text" id="col">
			<label for="">电话：</label>
			<input type="text" id="coll"/>
			<input type="button" id="btn" value="生成">
			<div id="output">
				<!-- <table>
		            <tbody>
		                <tr>
		                    <td>浮动法</td>
		                </tr>
		            </tbody>
		        </table> -->
			</div>
		</div>
		<script type="text/javascript">
			//获取元素
			var btn = document.querySelector('#btn');
			var row = document.querySelector('#row');
			var col = document.querySelector('#col');
			var coll=document.querySelector('#coll')
			var outputs = document.querySelector('#output');
			
			//给按钮绑定点击事件
			btn.onclick = function() {
				outputs.innerHTML = '';
				//获取 行 和 列 数
				var _row = row.value;
				var _col = col.value;
				var _coll= coll.value;
				//创建table 和 tbody 
				var table = document.createElement('table');
				var tbody = document.createElement('tbody');
			
				//把tbody添加到table中
				table.appendChild(tbody);
			
				//根据行和列生成表格
				for (var i = 0; i < _row; i++) {
					//创建行
					var tr = document.createElement('tr');
			
					//隔行变色
					if (i % 2 !== 0) {
						tr.style.background = '#ccc'
					}
			
			
					for (var j = 0; j < _col; j++) {
			
						var td = document.createElement('input');
						if (j === 0) {
							td.innerHTML = (j + i) + 1
						} else {
							td.innerHTML = '单元格' + i + j
			
						}
			
						//内层循环一次 将一个td添加到tr里面
			
						tr.appendChild(input);
						// res=tr.className='b'+i+1
					}
			
					//添加 删除 和复制按钮 并给它们赋值
					var btn1 = document.createElement('button');
					btn1.innerHTML = '删除';
		</script>
	</body>
</html>
